<!-- 协同页面 -->
<template>
	<view>
		<view class="" >
			<u-swipe-action>
				<u-swipe-action-item
					:ref="'swiperAction'+index"
					style="margin-bottom: 20rpx;"
					class="card"
					:options="optionsAction"
					v-for="(detail,index) in list"
					:style="[{animationDelay: (index + 1)*0.1 + 's'}]"
					:name="index"
					:key="index"
					@click="onDelete"
					:threshold="100"
					:disabled="detail.isAllowDel==0"
				>
				<view class="notification" @click="onDetail(detail)">
					<view class="notification-top">
						
						<view class="title"><span style="color: #dd1a32;font-weight:600" v-show="detail.processFlag&&(detail.processFlag == 4 || detail.processFlag == 'reject')">【退回】</span>【{{detail.bizBpmTitle}}】</view>
					</view>
					<view class="notification-middle">
						<view class="label">{{detail.draftType }}</view>
						<view class="label-content">{{detail.taskName}}</view>
					</view>
					<view class="notification-bottom">
						<view class="avatar-name">
							<view class="avatar">
								<image src="@/static/synergy/avatar.png" mode=""></image>
							</view>
							<view class="name">由{{ getName() }}提交</view>
						</view>
						<view class="date-time">
							{{ detail.createTime }}
						</view>
					</view>
				</view>
				</u-swipe-action-item>
			</u-swipe-action>
		</view>
	</view>
</template>

<script>
	
	export default {
		props: {
			list: {
				type: Array,
				default: () => []
			},
			tabIndex: {
				type: [String,Number],
			}
		},
		data() {
			return {
				optionsAction: [{
					text: '删除',
					style: {
						backgroundColor: '#f56c6c'
					}
				}]
			}
		},
		onLoad() {},
		methods: {
			// 点击删除
			onDelete (event) {
				let ref = 'swiperAction' + event.name
				this.$refs[ref][0].closeHandler()
				this.$emit('delete', this.list[event.name], event.name)
			},
			
			// 点击跳转详情
			onDetail (item) {
				this.$emit('detail', item)
			},
			
			getName () {
				return uni.getStorageSync('userInfo').realname
			}
		}
	}
</script>
<style lang="scss" scoped>

// 通知信息
.notification{
	background: #FFFFFF;
	box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(0,0,0,0.05);
	border-radius: 8rpx;
	
	padding: 20rpx 22rpx 0rpx 32rpx;
	// margin-bottom: 20rpx;
	.notification-top{
		display: flex;
		align-items: center;
		.title{
			font-size: 14px;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #171717;
			overflow: hidden; /*超出隐藏*/
			text-overflow: ellipsis;/*隐藏后添加省略号*/
			white-space: nowrap;/*强制不换行*/
		}
	}
	
	.notification-middle{
		display: flex;
		align-items: center;
		margin-top: 12rpx;
		.label{
			font-size: 10px;
			font-family: PingFangSC-Light, PingFang SC;
			font-weight: 300;
			color: #1E6FFF;
			padding: 6rpx 8rpx;
			border-radius: 6rpx;
			border: 1px solid #1E6FFF;
			margin-right: 12rpx;
		}
		.label-content{
			font-size: 12px;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #919191;
		}
	}
	
	.notification-bottom{
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 18rpx;
		padding-bottom: 20rpx;
		.avatar-name{
			display: flex;
			align-items: center;
			.avatar{
				margin-right: 8rpx;
				width: 32rpx;
				height: 32rpx;
				image{
					width: 32rpx;
					height: 32rpx;
					border-radius: 50%;
				}
			}
			.name{
				font-size: 12px;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #7F7F7F;
			}
		}
		.date-time{
			font-size: 12px;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #C6C6C6;
		}
		
	}
	.btn{
		text-align: center;
		padding: 20rpx 0;
		font-size: 14px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #1E6FFF;
	}
}
/deep/ .u-swipe-action-item__right__button__wrapper{
	border-radius: 6rpx !important;
}
/deep/ .u-swipe-action-item__right__button__wrapper:active{
	background-color: red !important;
	border-radius: 6rpx !important;
}
/deep/ .u-swipe-action-item{
	touch-action: initial;
}
</style>
